<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            cursor: pointer;
        }
    </style>
</head>
<body>
<button>创建列表</button>
<ul></ul>

<script>

    var btn = document.getElementsByTagName("button")[0];
    //获取相关元素并定义内容
    var arr = ["昭君出塞","西施浣纱","贵妃醉酒","貂蝉拜月"];
    var ul = document.getElementsByTagName("ul")[0];
    btn.onclick = function () {
        for(var i =0;i<arr.length;i++){
            var newLi = document.createElement('li');
            newLi.innerHTML = arr[i];
            ul.appendChild(newLi);
        }
        var liArr = ul.children;
        for(var i=0;i<liArr.length;i++){
            liArr[i].onmouseover = function () {
                //排他思想，高亮显示
                for(var j=0;j<liArr.length;j++){
                    liArr[j].style.backgroundColor = "";
                }
                this.style.backgroundColor = "red";
            }
        }


    }
</script>


</body>
</html>